<template>
  <view class="container">
    <!-- 顶部用户信息 -->
    <view class="user-info" @click="handleUserInfoClick" :style="{ cursor: !isLogin ? 'pointer' : 'default' }">
      <view class="avatar">
        <image src="/static/icons/face-test.png" mode="aspectFill"></image>
      </view>
      <view class="user-details">
        <text class="username">
          {{ isLogin ? userInfo.username || $t('my.name_empty') : $t('my.not_login') }}
        </text>
        <!-- <text class="user-level" v-if="isLogin">Lv{{ userInfo.level }}</text> -->
      </view>
      <!-- <uni-icons type="gear" size="26" color="#666"></uni-icons> -->
    </view>

    <!-- 功能区：每行3个，超出自动换行 -->
    <view class="function-grid">
      <view class="grid-row">
        <view class="grid-item" @click="recordTongue()">
          <image src="/static/icons/tongue_record.png" mode="aspectFit"></image>
          <text>{{ $t('my.tongue_record') }}</text>
        </view>
        <view class="grid-item" @click="recordFace()">
          <image src="/static/icons/face_diagnosis_record.png" mode="aspectFit"></image>
          <text>{{ $t('my.face_record') }}</text>
        </view>
        <view class="grid-item" @click="acupointrRecord()">
          <image src="/static/icons/acupoint_record.png" mode="aspectFit"></image>
          <text>{{ $t('my.acupoint_record') }}</text>
        </view>
        <view class="grid-item" @click="pulseRecord()">
          <image src="/static/icons/pulse_diagnosis_record.png" mode="aspectFit"></image>
          <text>{{ $t('my.pluse_record') }}</text>
        </view>
        <view class="grid-item" @click="addRecord()" v-if="userInfo.current_role_id == 2">
          <image src="/static/icons/treatment_record.png" mode="aspectFit"></image>
          <text>{{ $t('my.add_prescription') }}</text>
        </view>
        <view class="grid-item" @click="RecordList()" v-if="userInfo.current_role_id == 2">
          <image src="/static/icons/detection-record.png" mode="aspectFit"></image>
          <text>{{ $t('my.prescription_record') }}</text>
        </view>
        <view class="grid-item" @click="addRecordZhong()" v-if="userInfo.current_role_id == 2">
          <image src="/static/icons/treatment_record_zhong.png" mode="aspectFit"></image>
          <text>{{ $t('my.add_prescription_zhong') }}</text>
        </view>
      </view>
    </view>

    <!-- 其他功能列表 -->
    <view class="function-list">
      <view class="list-item" @click="toPage('/pages/settings/index')" v-if="isLogin">
        <text>{{ $t('my.information') }}</text>
      </view>
      <view class="list-item" @click="toPage('/pages/resetpwd/index')" v-if="isLogin">
        <text>{{ $t('my.change_pwd') }}</text>
      </view>
      <!-- 新增：切换语言 -->
      <view class="list-item" @click="switchLanguage">
        <text>{{ $t('settings.language') }}</text>
        <view class="item-right">
          <text class="current-value">{{ $t('language.name') }}</text>
        </view>
      </view>
      <!-- 新增：退出登录，仅登录状态下显示 -->
      <view class="list-item" v-if="isLogin" @click="handleLogout">
        <text style="color: #fa5151">{{ $t('settings.logout') }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import { useUserStore } from '@/store/user.js'
  import { useI18n } from 'vue-i18n'
  import { setTabBarText } from '@/utils/setTabBarText'
  export default {
    computed: {
      userStore() {
        return useUserStore()
      },
      userInfo() {
        return this.userStore.userInfo
      },
      isLogin() {
        return this.userStore.isLogin
      }
    },

    setup() {
      const { t, locale } = useI18n() // 必须在 setup() 里
      const userStore = useUserStore()
      // 设置页面标题
      if (typeof uni !== 'undefined' && uni.setNavigationBarTitle) {
        uni.setNavigationBarTitle({
          title: t('my.title')
        })
      }
      return { t, userStore, locale }
    },
    onShow() {
      setTimeout(() => {
        setTabBarText()
      }, 200)
    },
    methods: {
      handleUserInfoClick() {
        if (!this.isLogin) {
          uni.navigateTo({
            url: '/pages/login/index'
          })
        } else {
          uni.navigateTo({
            url: '/pages/settings/index'
          })
        }
      },
      record() {
        uni.navigateTo({
          url: '/pages/record/index'
        })
      },
      acupointrRecord() {
        uni.navigateTo({
          url: '/pages/record/acupoint/index'
        })
      },
      pulseRecord() {
        uni.navigateTo({
          url: '/pages/record/pulse/index'
        })
      },
      toPage(url) {
        uni.navigateTo({ url: url })
      },
      addRecord() {
        //跳转
        this.toPage('/pages/order/index')
      },
      addRecordZhong() {
        //跳转
        uni.navigateTo({
          url: '/pages/medicine/index'
        })
      },
      RecordList() {
        //跳转
        this.toPage('/pages/order/list')
      },
      recordTongue() {
        uni.navigateTo({
          url: '/pages/record/tongue/index'
        })
      },
      recordFace() {
        uni.navigateTo({
          url: '/pages/record/face/index'
        })
      },
      switchLanguage() {
        uni.showActionSheet({
          itemList: [this.$t('language.chinese'), this.$t('language.english')],
          success: res => {
            let targetLocale = ''
            if (res.tapIndex === 0) targetLocale = 'zh'
            else if (res.tapIndex === 1) targetLocale = 'en'
            if (targetLocale && targetLocale !== this.$i18n.locale) {
              this.$i18n.locale = targetLocale
              uni.setStorageSync('userLanguage', targetLocale)
              uni.showToast({ title: this.$t('settings.languageSwitched'), icon: 'none' })
              // 语言切换后刷新当前页面
              setTimeout(() => {
                const pages = getCurrentPages()
                const current = pages[pages.length - 1]
                const tabbarPages = ['/pages/my/index']
                if (tabbarPages.includes('/' + current.route)) {
                  uni.switchTab({ url: '/' + current.route })
                } else {
                  uni.redirectTo({ url: '/' + current.route })
                }
              }, 300)
            }
          }
        })
      },
      handleLogout() {
        uni.showModal({
          title: this.t('settings.title'),
          content: this.t('settings.logoutConfirm'),
          success: res => {
            if (res.confirm) {
              this.userStore.logout()
              uni.showToast({ title: this.t('settings.loggedOut'), icon: 'none' })
              uni.reLaunch({ url: '/pages/login/index' })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background: #f5f5f5;
  }

  .container {
    padding: 0 15px;
    padding-top: 15px;
  }

  .user-info {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    padding: 15px;

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 15px;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .user-details {
      flex: 1;
    }

    .username {
      font-size: 16px;
      font-weight: bold;
    }

    .user-level {
      background-color: #ffd700;
      color: white;
      border-radius: 10px;
      padding: 2px 5px;
      margin-left: 5px;
      font-size: 12px;
    }
  }

  .function-grid {
    margin-top: 15px;
    background-color: white;
    border-radius: 10px;
    padding: 15px;

    .grid-row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0;
    }

    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 33.33%;
      margin-bottom: 15px;

      image {
        width: 40px;
        height: 40px;
        margin-bottom: 5px;
      }

      text {
        font-size: 12px;
        color: #666;
      }
    }
  }

  .function-list {
    margin-top: 15px;
    background-color: white;
    border-radius: 10px;

    .list-item {
      display: flex;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      image {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }

      text {
        flex-grow: 1;
        font-size: 14px;
      }

      .arrow {
        width: 16px;
        height: 16px;
      }

      .service-time {
        color: #999;
        font-size: 12px;
      }
    }
  }
</style>
